<template>
  <div class="AuditProp">

    <div class="title">
      挂牌审核
    </div>
    <!--头部区-->
    <div class="head">
      <el-form :inline="true" :model="form">
        <el-form-item label="用户名称">
          <el-input v-model="form.username" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="企业名称">
          <el-input v-model="form.supplierName" placeholder="请输入"></el-input>
        </el-form-item>


        <el-form-item label="选择牌子状态">
          <el-select v-model="form.propstatus" placeholder="选择审核状态">
            <el-option label="其他" value=""></el-option>
            <el-option label="待审核" value="-1"></el-option>
            <el-option label="已过审" value="0"></el-option>
          </el-select>
        </el-form-item>

        <div>
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="form.data"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </div>


      </el-form>
    </div>

    <!--表格区-->
    <div class="content">
      <el-table
        :data="dataList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          v-if="false"
          prop="id"
          label="id"
          width="50">
        </el-table-column>
        <el-table-column
          label="用户名"
          prop="username">
        </el-table-column>
        <el-table-column
          label="公司名称"
          prop="supplierName">
        </el-table-column>
        <el-table-column
          label="公司类型"
          prop="enterpriseType">
        </el-table-column>
        <el-table-column
          label="联系方式"
          prop="accountNumber">
        </el-table-column>
        <el-table-column
          label="供应数量"
          prop="supplyQuantity">
        </el-table-column>
        <el-table-column
          label="原煤单价"
          prop="unitPrice">
        </el-table-column>
        <el-table-column
          label="发货港口"
          prop="port">
        </el-table-column>
        <el-table-column
          label="产地"
          prop="placeOrigin">
        </el-table-column>
        <el-table-column
          label="牌子状态"
          prop="propstatus">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.propstatus === '-1' ? 'warning' : 'success'"
              disable-transitions>{{scope.row.propstatus=='-1'?'待审核':'过审核'}}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showProp(scope.row.id)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="total, prev, pager, next"
          :total="pagination.totals">
        </el-pagination>
      </div>
    </div>


    <!--详情窗口-->
    <el-dialog top="2vh" class="showDialog" customClass="customWidth" title="详情" :visible.sync="showCheckDialog">
      <div class="dialogDiv">
        <el-descriptions class="margin-top" title="用户信息" v-show="active==0" :column="3">
          <el-descriptions-item label="用户名">{{showForm.username}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{showForm.phone}}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{showForm.identity}}</el-descriptions-item>
          <el-descriptions-item label="企业资质">{{showForm.available}}</el-descriptions-item>
          <el-descriptions-item label="住址">{{showForm.address}}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title="企业信息" v-show="active==1" :column="3">
          <el-descriptions-item label="企业名称">{{showForm.supplierName}}</el-descriptions-item>
          <el-descriptions-item label="企业类型">{{showForm.enterpriseType=='0'?'买方':'卖方'}}</el-descriptions-item>
          <el-descriptions-item label="法人名字">{{showForm.legalPerson}}</el-descriptions-item>
          <el-descriptions-item label="法人身份证">{{showForm.legalPersonIdNumber}}</el-descriptions-item>
          <el-descriptions-item label="注册地址">{{showForm.registrationArea}}</el-descriptions-item>
          <el-descriptions-item label="企业邮箱">{{showForm.enterpriseMailbox}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{showForm.contactNumber}}</el-descriptions-item>
          <el-descriptions-item label="传真">{{showForm.fax}}</el-descriptions-item>
          <el-descriptions-item label="邮政编码">{{showForm.postalCode}}</el-descriptions-item>
          <el-descriptions-item label="注册资金">{{showForm.registerFund}}</el-descriptions-item>
          <el-descriptions-item label="经营执照号">{{showForm.businessCertificateId}}</el-descriptions-item>
          <el-descriptions-item label="组织机构代码">{{showForm.organizationCode}}</el-descriptions-item>
          <el-descriptions-item label="营业许可证编号">{{showForm.businessLicenseId}}</el-descriptions-item>
          <el-descriptions-item label="税务登记代码">{{showForm.taxRegistrationCertificateCode}}</el-descriptions-item>
          <el-descriptions-item label="开户银行">{{showForm.bankOfDeposit}}</el-descriptions-item>
          <el-descriptions-item label="账号">{{showForm.accountNumber}}</el-descriptions-item>
          <el-descriptions-item label="运输方式及保障能力">{{showForm.typeOfShipping}}</el-descriptions-item>
          <el-descriptions-item label="应商介绍">{{showForm.introductionToYingshang}}</el-descriptions-item>
          <el-descriptions-item label="煤源存放地点、数量、质量">{{showForm.coalDescription}}</el-descriptions-item>
        </el-descriptions>


        <el-descriptions class="margin-top" title="牌子信息" v-show="active==2" :column="4">
          <el-descriptions-item label="牌子编号">{{showForm.id}}</el-descriptions-item>
          <el-descriptions-item label="供应数量">{{showForm.supplyQuantity}}</el-descriptions-item>
          <el-descriptions-item label="热值">{{showForm.calorificValue}}</el-descriptions-item>
          <el-descriptions-item label="原煤单价(元/吨)">{{showForm.unitPrice}}</el-descriptions-item>
          <el-descriptions-item label="全硫">{{showForm.sulfur}}</el-descriptions-item>
          <el-descriptions-item label="产地">{{showForm.placeOrigin}}</el-descriptions-item>
          <el-descriptions-item label="运费单价">{{showForm.freightUnitPrice}}</el-descriptions-item>
          <el-descriptions-item label="挥发分最低（%）">{{showForm.volatitleMatterDown}}</el-descriptions-item>
          <el-descriptions-item label="挥发分最高（%）">{{showForm.volatitleMatterUp}}</el-descriptions-item>
          <el-descriptions-item label="发货港口">{{showForm.port}}</el-descriptions-item>
          <el-descriptions-item label="空干基灰分">{{showForm.ashContent}}</el-descriptions-item>
          <el-descriptions-item label="水分">{{showForm.waterContent}}</el-descriptions-item>
          <el-descriptions-item label="牌子状态">{{showForm.propstatus}}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{showForm.createTime}}</el-descriptions-item>
        </el-descriptions>


      </div>


      <span slot="footer" class="dialog-footer">
        <el-input
          style="display:inline-block;width:45%"
          v-show="showForm.propstatus=='-1'"
          placeholder="请输入评价"
          v-model="input"
          clearable>
        </el-input>
        <el-button v-show="showForm.propstatus=='-1'" type="primary" @click="approved('0')">审核通过</el-button>
        <el-button v-show="showForm.propstatus=='-1'" @click="approved('-2')">驳回</el-button>
         <el-button v-show="active!=0" @click="active--">上一页</el-button>
         <el-button v-show="active!=2" @click="active++">下一页</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import Common from '@/components/common/Common'

  const axios = require("axios");
  export default {
    components: {moment},
    created: function () {
      if (sessionStorage.getItem("userid") == null && sessionStorage.getItem("status") != '3') {
        this.$router.push("/login");
      }
    },
    mounted: function () {
      this.getData();
    },
    name: "AuditProp",
    data() {
      return {
        pagination: {
          pageSize: 6, // 显示的条数
          totals: 12, // 总数
          currentPage: 1, // 当前第几页
        },
        dataList: [],
        showCheckDialog: false,
        active: 0,
        showForm: {},
        input: '',
        form: {
          data: [new Date(2020, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
          start: "",
          end: "",
          propstatus: '-1',
          supplierName: '',
          username: ''
        },
      }
    },
    methods: {
      getData() {
        var vm = this;
        axios.post(Common.API + 'prop/getPropAuditVoList?currentPage=' + vm.pagination.currentPage + '&pageSize=' + vm.pagination.pageSize, {
          propstatus: vm.form.propstatus,
          supplierName: vm.form.supplierName,
          username: vm.form.username,
          start: moment(vm.form.data[0]).format("YYYY-MM-DD HH:mm:ss"),
          end: moment(vm.form.data[1]).format("YYYY-MM-DD HH:mm:ss")
        }).then(function (res) {
          if (res.data.length > 0) {
            vm.pagination.totals = res.data[0].totals;
          }
          vm.dataList = res.data;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      handleCurrentChange(val) {
        this.pagination.currentPage = val;
        this.getData();
      },
      showProp(id) {
        this.showCheckDialog = true;
        this.showForm = this.dataList.find(item => item.id == id)
        console.log(this.showForm);
      },
      approved(val) {
        var vm = this
        axios.post(Common.API + 'prop/approvedProp', {
          prop: {
            id: vm.showForm.id,
            propstatus: val
          },
          message: {
            userid: vm.showForm.userid,
            content: '您编号为:' + vm.showForm.id + '的牌子' + (val == '0' ? '已过审' : '未过审') + "   评审人评价：" + vm.input,
            status: '未阅'
          }
        }).then(function (res) {
          if (res.data.code == 200) {
            vm.$message({
              message: res.data.msg,
              type: 'success'
            });
            vm.showCheckDialog = false;
            vm.getData();
          } else {
            vm.$message.error(res.data.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>

  body {
    height: 100%;
  }

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .title {
    margin-left: 30px;
    line-height: 50px;
    width: 100%;
    font-size: 30px;
    height: 50px;
  }

  .AuditProp {
    width: 98%;
    height: 100px;
  }

  .AuditProp .head {
    padding-top: 20px;
    width: 80%;
    margin: 0 auto;
  }

  .AuditProp .demo-form-block {
    display: block;
  }

  .AuditProp .content {
    width: 80%;
    margin: 0 auto;
  }

  .AuditProp .dialogDiv {
    height: 500px;
  }
</style>
